<!--
 * @Author: gaofang
 * @LastEditTime: 2021-01-30 08:15:20
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
-->
<template>
  <a-card>
    <!-- 顶部 -->
    <a-form-model ref="" :model="form" v-bind="layout">
      <a-row>
        <a-col :xl="8" :lg="8" :md="12" :sm="24" :xs="24">
          <a-form-model-item ref="" label="反馈日期" prop="">
            <a-date-picker v-model="form.date" style="width:100%" disabled />
          </a-form-model-item>
        </a-col>
        <a-col :xl="8" :lg="8" :md="12" :sm="24" :xs="24">
          <a-form-model-item ref="" label="提交部门" prop="">
            <a-input style="width: 100%" v-model="form.deptIdName" disabled />
          </a-form-model-item>
        </a-col>
        <a-col :xl="8" :lg="8" :md="12" :sm="24" :xs="24">
          <a-form-model-item ref="" label="提交人" prop="">
            <a-input
              style="width: 100%"
              v-model="form.submitterName"
              disabled
            />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-divider>反馈问题</a-divider>

      <center>注：一个“问题描述”只写一个问题，可以点击“添加问题”，增加一个新的问题。</center>

      <div
        style="margin-top:30px"
        v-for="(ProblemInfo, index) in form.addproblemInfo"
        :key="index"
      >
        <a-row>
          <!-- <a-col :xl="8" :lg="8" :md="12" :sm="24" :xs="24"> -->
          <a-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
            <a-form-model-item
              ref=""
              label="反馈页面"
              prop=""
              :labelCol="{ span: 5, offset: 0 }"
            >
              <a-input v-model="ProblemInfo.feedbackPage" />
            </a-form-model-item>
          </a-col>
          <a-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
            <!-- <a-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24"> -->
            <a-form-model-item
              :labelCol="{ span: 5, offset: 0 }"
              ref=""
              label="问题描述"
              prop=""
            >
              <a-textarea
                v-model="ProblemInfo.problemDescription"
                style="background-color: white; color: black"
                :auto-size="{ minRows: 3 }"
              />
            </a-form-model-item>
          </a-col>

          <!-- </a-row>
        <a-row> -->
          <a-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
            <!-- <a-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24"> -->
            <a-form-model-item label="">
              <a-upload
                style="margin-left:60px; margin-left: 70%;"
                list-type="picture-card"
                :file-list="ProblemInfo.fileList"
                v-model="ProblemInfo.url"
                :customRequest="customRequest"
                @change="handleFileChange(index)"
                :multiple="true"
              >
                <a-icon type="plus" />
                <div class="ant-upload-text">上传图片</div>
              </a-upload>
              <a-modal
                :visible="previewVisible"
                :footer="null"
                @cancel="handleCancel"
              >
                <img alt="example" style="width: 100%" :src="previewImage" />
              </a-modal>
            </a-form-model-item>
          </a-col>
          <a-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
            <!-- <a-col :xl="4" :lg="4" :md="12" :sm="24" :xs="24"> -->
            <center>
              <a-icon
                type="delete"
                theme="twoTone"
                two-tone-color="#eb2f96"
                style="fontsize: 20px; margin-top: 35px;margin-left:-250px;"
                @click="removeInfo(index)"
              />
            </center>
          </a-col>
        </a-row>
      </div>
      <a-row>
        <a-form-model-item
          :wrapper-col="{ span: 14, offset: 9 }"
          :labelCol="{ span: 4, offset: 8 }"
        >
          <a-button
            type="primary"
            style="margin-right: 5%"
            @click="addInfo"
            ghost
            size="default"
          >
            添加问题
          </a-button>
          <a-button type="primary" @click="onSubmit()" style="margin-right: 5%"
            >提交
          </a-button>

          <a-button @click="resetForm()">重置 </a-button>
        </a-form-model-item>
      </a-row>
    </a-form-model>
  </a-card>
</template>

<script>
import moment from "moment";

import {
 
  getStaticFileURL,
  upload,
} from "@/services/modules/common";
// const comHttp = new CommonAjax(); // 公用接口

import { ProblemFeedBackHttp } from "@/services/modules/ProblemFeedbackSystem";
const FeedBackHttp = new ProblemFeedBackHttp();
export default {
  data() {
    return {
      form: {
        date: moment(new Date().toLocaleDateString()).format("YYYY-MM-DD"), //申请日期
        deptId: "", // 提交部门id是string型
        deptIdName: "", // 提交部门name
        submitter: "", // 提交人id是string型
        submitterName: "", // 提交人name
        systemName: "仓储管理系统", //系统名称（默认）

        addproblemInfo: [
          {
            feedbackPage: "", // 反馈页面
            problemDescription: "", // 问题描述
            url: "", // 图片
            fileList: [], // 图片显示
          },
        ],
      },
      layout: {
        labelCol: { span: 8 },
        wrapperCol: { span: 15 },
      },
      tijiaobumenList: [],
      pageTree: [],
      fileList: [],
      previewVisible: false, //图片预览

      previewImage: "",
    };
  },
  components: {},
  // 生命周期函数
  mounted() {
    // this.getUserByToken();
    this.getdept();//获取部门id、name和姓名id、name
  },
  methods: {
    // 删除该按钮
    removeInfo(index) {
      // console.log(index);
      if (this.form.addproblemInfo.length > 1) {
        this.form.addproblemInfo.splice(index, 1);
        this.$message.success("删除成功");
      } else {
        this.$message.error("最后一行不能删除");
      }
    },
    onSubmit() {
      // console.log("this.form.addproblemInfo",this.form.addproblemInfo);
      let data = [];
      for (let i = 0; i < this.form.addproblemInfo.length; i++) {
        let temp1 = "";
        for (let t = 0; t < this.form.addproblemInfo[i].fileList.length; t++) {
          temp1 = temp1 + ";" + this.form.addproblemInfo[i].fileList[t].url2;
        }

        let temp = {
          date: this.form.date,
          deptId: this.form.deptId,
          submitter: this.form.submitter,
          systemName: this.form.systemName,
          feedbackPage: this.form.addproblemInfo[i].feedbackPage,
          problemDescription: this.form.addproblemInfo[i].problemDescription,
          url: temp1,
        };
        data.push(temp);
        console.log("data", data);
      }
      console.log("datazing", data);

      FeedBackHttp.saveProblemList(data).then((res) => {
        console.log("res", res);
        if (res.code == 200) {
          this.$message.success("提交成功");
          this.resetForm();
        } else {
          this.$message.error("提交失败");
        }
      });
    },
    //  根据TOKEN获取用户的部分信息
    // getUserByToken(queryPath = "") {
    //   comHttp.getUserByToken(queryPath).then((res) => {
    //     console.log("我i进来了", res);
    //     this.form.submitter = res.result.sysUserId; //提交人id是string型
    //     this.form.submitterName = res.result.sysUsername; //提交人name
    //   });
    // },
    getdept() {
      console.log("this.$store.state", this.$store.state);
      this.form.deptId = this.$store.state.user.departments[0].id; //提交部门id是string型
      this.form.deptIdName = this.$store.state.user.departments[0].departName; //提交部门name
      this.form.submitter = this.$store.state.user.info.id; //提交人id
      this.form.submitterName= this.$store.state.user.info.username; //提交人name
      console.log("this.form.submitterName", this.form.submitterName);
    },
    // 重置功能
    resetForm() {
      this.form = {
        date: moment(new Date().toLocaleDateString()).format("YYYY-MM-DD"), //申请日期
        deptId: "", // 提交部门id是string型
        deptIdName: "", // 提交部门name
        submitter: "", // 提交人id是string型
        submitterName: "", // 提交人name
        systemName: "仓储管理系统", //系统名称（默认）

        addproblemInfo: [
          {
            feedbackPage: "", // 反馈页面
            problemDescription: "", // 问题描述
            url: [], // 图片
            fileList: [], // 图片显示
          },
        ],
       
      };
      this.fileList=[];
    this.getdept();//获取部门id、name和姓名id、name
      
      console.log("重置成功");
    },
    // 添加按钮
    addInfo() {
      this.fileList = [];
      // 此处字段根据数据库字段修改
      this.form.addproblemInfo.push({
        page: "", // 反馈页面
        description: "", // 问题描述
        fileList: [], // 图片
      });
    },
    removechuguworkingProcedureId() {},
    // ------自定义文件上传请求开始----------
    customRequest(options) {
      // this.fileList=[];
      console.log("options", options);
      const curFile = options.file; //拿到上传文件
      console.log("----curFile:", curFile);
      if (!curFile) return; //判断文件是否为空

      // 生成 FormData 上传数据
      // 并设置 files 字段 填充数据
      let formData = new FormData();
      let bizPath = "deliveryImages";
      formData.append("biz", bizPath);
      formData.append("file", curFile);

      upload(formData, (response) => {
        this.fileList.push({
          uid: String(this.uid1), //唯一标识，最好是负值
          name: curFile.name, //图片名称
          status: "done", //上传状态
          url: getStaticFileURL(response.message), //获取上传图片路径
          url2: response.message,
        });
        this.uid--;
      });
      console.log("this.fileList:::", this.fileList);
    },
    // customRequest(options) {
    //   // this.fileList=[];
    //   console.log("options", options);
    //   const curFile = options.file; //拿到上传文件
    //   console.log("----curFile:", curFile);
    //   if (!curFile) return; //判断文件是否为空

    //   // 生成 FormData 上传数据
    //   // 并设置 files 字段 填充数据
    //   let formData = new FormData();
    //   let bizPath = "deliveryImages";
    //   formData.append("biz", bizPath);
    //   formData.append("file", curFile);

    //   upload(formData, (response) => {
    //     this.fileList.push({
    //       uid: String(this.uid1), //唯一标识，最好是负值
    //       name: curFile.name, //图片名称
    //       status: "done", //上传状态
    //       url: getStaticFileURL(response.message), //获取上传图片路径
    //       url2: response.message,
    //     });
    //     this.uid--;
    //   });
    //   console.log("this.fileList:::", this.fileList);
    // },

    // ------自定义文件上传请求结束----------
    handleCancel() {
      this.previewVisible = false;
    },
    // 处理图片文件的改变
    handleFileChange(index) {
      console.log("index", index);
      console.log("this.filelist", this.fileList);
      console.log(
        "this.form.addproblemInfo[index].fileList",
        this.form.addproblemInfo[index].fileList
      );
      this.form.addproblemInfo[index].fileList = [];
      this.form.addproblemInfo[index].fileList = this.fileList;

      console.log("this.form", this.form);
      console.log(
        "222this.form.addproblemInfo[index].fileList",
        this.form.addproblemInfo[index].fileList
      );
    },
    // handleFileChange(index) {
    //   console.log("index",index);
    //   let temp = [];
    //   for (let i = 0; i < this.fileList.length; i++) {
    //     temp.push(this.fileList[i]);
    //   }
    //   this.form.addproblemInfo[index].fileList = temp;
    //   console.log("index", index);
    //   // console.log("fileList", this.fileList);
    //   //   this.form.addproblemInfo[index].fileList.push(this.fileList);
    //   console.log("form", this.form);
    // },
  },
};
</script>
<style></style>
